<template>
	<div class="p_left">
		<div class="p_left_info p_left_info1" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
			<h1>食品</h1>
			<div class="p_left_t">
				<span>销售经理</span>
				<span>品牌经理</span>
				<span>市场营销经理</span>
			    <div class="right_wtite" v-if="one1"></div>
			</div> 
			<div class="p_right"  v-if="one">
				<div class="p_right_info">
					<h2>银行</h2>
					<div class="p_right1">
						<span>客户经理</span>
						<span>支行行长</span>
						<span>综合柜员</span>
						<span>招投标工程师</span>
						<span>成本经理</span>
						<span>成本主管</span>
						<span>土建预算员</span>
						<span>招投标工程师</span>
						<span>成本经理</span>
						<span>成本主管</span>
						<span>土建预算员</span>
						<span>招投标工程师</span>
						<span>成本经理</span>
						<span>成本主管</span>
						<span>土建预算员</span>
						<span>招投标工程师</span>
						
					</div>
				</div>
				</div>
		</div>
		
		<div class="p_left_info p_left_info2" @mouseenter="onMouseOver2" @mouseleave="onMouseOut2">
			<h1>日化</h1>
			<div class="p_left_t">
				<span>研发总监</span>
				<span>质量管理</span>
				<span>采购总监</span>
				<div class="right_wtite2" v-if="two1"></div>
			</div>
			<div class="p_right_two"  v-if="two">
				<div class="p_right_info">
					<h2>保险</h2>
					<div class="p_right1">
						<span>建筑工程师</span>
						<span>机电工程师</span>
						<span>技术工程师</span>
						<span>预算工程师</span>
						<span>土建工程师</span>
						<span>水电工程师</span>
						<span>质检工程师</span>
						<span>安全工程师</span>
						<span>材料工程师</span>
						<span>施工员</span>
						<span>测绘</span>
						<span>工程总监</span>
						<span>安全管理</span>
						<span>项目总监</span>
						<span>项目经理</span>
						<span>项目主管</span>
						<span>项目专业</span>
						<span>项目助理</span>
						<span>项目工程师</span>
						<span>项目总经理</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="p_left_info p_left_info3" @mouseenter="onMouseOver3" @mouseleave="onMouseOut3">
			<h1>服装首饰</h1>
			<div class="p_left_t">
				<span>市场总监</span>
				<span>总工程师</span>
				<span>销售总监</span>
				<div class="right_wtite3" v-if="three1"></div>
			</div>
			<div class="p_right_three" v-if="three">
				<div class="p_right_info">
					<h2>设计</h2>
					<div class="p_right1">
						<span>建筑工程师</span>
						<span>结构设计师</span>
						<span>结构工程师</span>
						<span>钢结构设计</span>
						<span>电气设计</span>
						<span>暖通设计</span>
						<span>给排水设计</span>
						<span>总图工程师</span>
						<span>市内设计</span>
						<span>土建工程师</span>
						<span>经营人员</span>
						<span>CAD绘图员</span>
						<span>城市规划</span>
						<span>景观设计</span>
						<span>装潢设计</span>
						<span>规划设计师</span>
						<span>设计总监</span>
						<span>市政设计</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="p_left_info p_left_info4" @mouseenter="onMouseOver4" @mouseleave="onMouseOut4">
			<h1>家具家电</h1>
			<div class="p_left_t">
				<span>销售经理</span>
				<span>研发总监</span>
				<span>产品经理</span>
				<div class="right_wtite4" v-if="four1"></div>
			</div>
			<div class="p_right_four" v-if="four">
				<div class="p_right_info">
					<h2>物业</h2>
					<div class="p_right1">
						<span>物业租赁</span>
						<span>工程经理</span>
						<span>客服经理</span>
						<span>客服主管</span>
						<span>物业经理</span>
						<span>项目经理</span>
						<span>安全经理</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>客服</h2>
					<div class="p_right1">
						<span>客服经理</span>
						<span>客服主管</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="p_left_info p_left_info5" @mouseenter="onMouseOver5" @mouseleave="onMouseOut5">
			<h1>渠道</h1>
			<div class="p_left_t">
				<span>运营总监</span>
				<span>店长</span>
				<span>大客户经理</span>
				<div class="right_wtite5" v-if="five1"></div>
			</div>
			<div class="p_right_five" v-if="five">
				<div class="p_right_info">
					<h2>销售</h2>
					<div class="p_right1">
						<span>销售总监</span>
						<span>销售经理</span>
						<span>销售主管</span>
						<span>置业顾问</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>策划</h2>
					<div class="p_right1">
						<span>策划经理</span>
						<span>策划主管</span>
						<span>市场部经理</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>招商</h2>
					<div class="p_right1">
						<span>招商经理</span>
						<span>招商总监</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
    	name: 'PLeft',
        data () {
            return {
            	one : false,
            	two : false,
            	three : false,
            	four : false,
            	five:false,
            	one1 : false,
            	two1 : false,
            	three1 : false,
            	four1 : false,
            	five1:false
            }
        },
        methods:{
        	load(){
        	},
        	onMouseOver(){
        		this.one = true
        		this.one1 = true
        	},
        	onMouseOut(){
        		this.one = false
        		this.one1 = false
        	},
        	onMouseOver2(){
        		this.two = true
        		this.two1 = true
        	},
        	onMouseOut2(){
        		this.two = false
        		this.two1 = false
        	},
        	onMouseOver3(){
        		this.three = true
        		this.three1 = true
        	},
        	onMouseOut3(){
        		this.three = false
        		this.three1 = false
        	},
        	onMouseOver4(){
        		this.four = true
        		this.four1 = true
        	},
        	onMouseOut4(){
        		this.four = false
        		this.four1 = false
        	},
        	onMouseOver5(){
        		this.five = true
        		this.five1 = true
        	},
        	onMouseOut5(){
        		this.five = false
        		this.five1 = false
        	}
        },
        mounted () {
			this.load();
		}
    }
</script>
<style scoped>
	.right_wtite,.right_wtite2,.right_wtite3,.right_wtite4,.right_wtite5{
		height: 78px;
		width: 1px;
		border: 1px solid #FFFFFF;
		position: absolute;
		right: -1px;
		z-index: 300;
	}
	.right_wtite{
		top: 1px;
	}
	.right_wtite2{
		top: 81px;
	}
	.right_wtite3{
		top: 161px;
	}
	.right_wtite4{
		top: 241px;
	}
	.right_wtite5{
		top: 321px;
	}
	.p_left{
		width: 300px;
		height: 400px;
		position: relative;
	}
	.p_left_info:hover{
		border-left: 1px solid #2D8CF0;
		border-top: 1px solid #2D8CF0;
		border-bottom: 1px solid #2D8CF0;
	}
	.p_left_info{
		width: 300px;
		height: 80px;
		padding-left: 10px;
    	padding-top: 5px;
    	border: 1px solid #eee;
	}
	.p_left_info>h1{
	    font-size: 20px;
	    color: #2D8CF0;
	}
	.p_left_t{
		display: inline-block;
		margin-top: 5px;
	}
	.p_left_t>span{
		padding-right: 15px;
		font-size: 15px;
		margin-top: 3px;
		display: inline-block;
	}
	.p_left_t>span:hover{
		text-decoration: underline;
		color: #2D8CF0;
		cursor: pointer;
	}
	
	.p_right_info{
		margin-bottom: 10px;
	}
	.p_right_info>h2{
		font-size: 20px;
	    color: #2D8CF0;
	}
	.p_right{
		padding: 10px 15px;
		position: absolute;
		border: 1px solid #2D8CF0;
		width: 700px;
		height: 220px;
		top: 0px;
		left: 300px;
		z-index: 200;
		background: #FFFFFF;
	}
	.p_right_two{
		padding: 10px 15px;
		position: absolute;
		border: 1px solid #2D8CF0;
		width: 700px;
		height: 135px;
		top: 80px;
		left: 300px;
		z-index: 200;
		background: #FFFFFF;
	}
	.p_right_three{
		padding: 10px 15px;
		position: absolute;
		border: 1px solid #2D8CF0;
		width: 700px;
		height: 140px;
		top: 160px;
		left: 300px;
		z-index: 200;
		background: #FFFFFF;
	}
	.p_right_four{
		padding: 10px 15px;
		position: absolute;
		border: 1px solid #2D8CF0;
		width: 700px;
		height: 160px;
		top: 240px;
		left: 300px;
		z-index: 200;
		background: #FFFFFF;
	}
	.p_right_five{
		padding: 10px 15px;
		position: absolute;
		border: 1px solid #2D8CF0;
		width: 700px;
		height: 210px;
		top: 190px;
		left: 300px;
		z-index: 200;
		background: #FFFFFF;
	}
	.p_right1>span{
		padding-right: 18px;
		font-size: 15px;
		margin-top: 3px;
		display: inline-block;
	}
	.p_right1>span:hover{
		text-decoration: underline;
		color: #2D8CF0;
		cursor: pointer;
	}
</style>

